<template>
  <view class="animate__zoomInDown animate__animated container">
    <view class="banner-wrapper">
      <!-- 替换t-swiper为uni-app原生swiper -->
      <swiper 
        class="banner-swiper" 
        circular
        autoplay
        interval="3000"
        duration="500"
        @change="handleChange"
      >
        <swiper-item v-for="(item, index) in 7" :key="index" class="swiper-item">
          <image
            :src="url('c', item, 'jpg')"
            mode="aspectFill"
            class="banner-image"
            @tap="handleImageTap(index)"
          />
          <!-- 添加图片标题遮罩 -->
          <view class="image-overlay">
            <text class="image-title">{{ getBannerTitle(index) }}</text>
          </view>
        </swiper-item>
      </swiper>

      <!-- 添加自定义指示器 -->
      <view class="custom-indicator">
        <view 
          v-for="(item, index) in 7" 
          :key="index"
          :class="['indicator-dot', currentIndex === index ? 'active' : '']"
        ></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const url = $url;
const currentIndex = ref(0);

// 轮播图标题数据
const bannerTitles = [
  "赣傩文化展示",
  "傩面艺术精品",
  "非遗传承基地",
  "傩舞表演现场",
  "文创产品展示",
  "匠人工作室",
  "传统仪式展示"
];

// 处理轮播切换
const handleChange = (e) => {
  currentIndex.value = e.detail.current;
};

// 获取轮播图标题
const getBannerTitle = (index) => {
  return bannerTitles[index] || '';
};

// 处理图片点击
const handleImageTap = (index) => {
  uni.navigateTo({
    url: `/pages/culture/article?id=${index + 1}`
  });
};
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
}

.banner-wrapper {
  position: relative;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.1);
}

.banner-swiper {
  height: 400rpx;
  
  // #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO
  transform: translateY(0);
  // #endif
}

.swiper-item {
  position: relative;
  overflow: hidden;
  border-radius: 24rpx;
}

.banner-image {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
  
  &:active {
    transform: scale(1.02);
  }
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40rpx 30rpx 30rpx;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
}

.image-title {
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

.custom-indicator {
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  display: flex;
  gap: 12rpx;
  padding: 8rpx 12rpx;
  background: rgba(0,0,0,0.2);
  border-radius: 20rpx;
}

.indicator-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: all 0.3s;
  
  &.active {
    width: 24rpx;
    border-radius: 6rpx;
    background: #fff;
  }
}

// 适配不同屏幕尺寸
@media screen and (min-width: 768px) {
  .banner-swiper {
    height: 500rpx;
  }
  
  .image-title {
    font-size: 36rpx;
  }
}

@media screen and (max-width: 375px) {
  .banner-swiper {
    height: 350rpx;
  }
  
  .image-title {
    font-size: 28rpx;
  }
}
</style>
